<template>
  <div class="visit-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">📞 顾客回访管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增回访
          </el-button>
        </div>
      </template>

      <!-- 统计 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <el-statistic title="待回访" :value="pendingVisits" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="已回访" :value="completedVisits" value-style="color: #67c23a" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日回访" :value="todayVisits" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="回访率" :value="visitRate" suffix="%" />
        </el-col>
      </el-row>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="visitType" label="回访类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ getVisitTypeName(row.visitType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="planDate" label="计划日期" width="120" />
        <el-table-column prop="actualDate" label="实际日期" width="120" />
        <el-table-column prop="result" label="回访结果" width="120">
          <template #default="{ row }">
            <el-tag :type="getResultTag(row.result)">
              {{ getResultText(row.result) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="回访人" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'pending' ? 'warning' : 'success'">
              {{ row.status === 'pending' ? '待回访' : '已回访' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button 
              v-if="row.status === 'pending'" 
              link 
              type="success" 
              @click="handleComplete(row)"
            >
              完成回访
            </el-button>
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 完成回访对话框 -->
    <el-dialog v-model="completeDialogVisible" title="完成回访" width="600px">
      <el-form :model="completeForm" label-width="100px">
        <el-form-item label="回访结果">
          <el-radio-group v-model="completeForm.result">
            <el-radio label="satisfied">满意</el-radio>
            <el-radio label="normal">一般</el-radio>
            <el-radio label="unsatisfied">不满意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回访内容">
          <el-input v-model="completeForm.content" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="下次回访">
          <el-date-picker v-model="completeForm.nextDate" type="date" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="completeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCompleteSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const pendingVisits = ref(45)
const completedVisits = ref(234)
const todayVisits = ref(12)
const visitRate = ref(83.5)

const tableData = ref([
  {
    memberName: '张三', phone: '13800138001', visitType: 'satisfaction',
    planDate: '2024-01-25', actualDate: '', result: '', operator: '', status: 'pending'
  },
  {
    memberName: '李四', phone: '13800138002', visitType: 'care',
    planDate: '2024-01-20', actualDate: '2024-01-20', result: 'satisfied', 
    operator: '客服A', status: 'completed'
  }
])

const completeDialogVisible = ref(false)
const completeForm = reactive({
  result: 'satisfied',
  content: '',
  nextDate: ''
})

const getVisitTypeName = (type) => {
  const map = {
    satisfaction: '满意度回访',
    care: '关怀回访',
    birthday: '生日回访',
    inactive: '流失回访'
  }
  return map[type] || type
}

const getResultTag = (result) => {
  const map = { satisfied: 'success', normal: '', unsatisfied: 'danger' }
  return map[result] || 'info'
}

const getResultText = (result) => {
  const map = { satisfied: '满意', normal: '一般', unsatisfied: '不满意' }
  return map[result] || '-'
}

const handleAdd = () => {
  ElMessage.info('新增回访')
}

const handleComplete = (row) => {
  completeDialogVisible.value = true
}

const handleCompleteSubmit = () => {
  ElMessage.success('回访记录已保存')
  completeDialogVisible.value = false
}

const handleView = () => {
  ElMessage.info('查看回访详情')
}

const handleDelete = () => {
  ElMessage.success('删除成功')
}
</script>

<style scoped>
.visit-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.stat-cards {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}
</style>

